<template>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" label-position="top" inline>
        <el-alert
            type="warning"
            :closable="false"
            show-icon>
            <p>低于当前版本, 且低于要求的最低版本时, 需要客户端强更.</p>
            <br>
            <p>假设: <br>当前版本1.1.0, 最低版本1.0.5</p>
            <p>用户版本 1.0.4, 强更</p>
            <p>用户版本 1.0.6, 不强更</p>
        </el-alert>
        <el-divider></el-divider>
        <el-form-item label="系统" prop="os">
            <select-os v-model="form.os"></select-os>
        </el-form-item>
        <el-form-item label="最小版本号" prop="minVer">
            <el-input v-model="form.minVer" placeholder="x.x.x格式"></el-input>
        </el-form-item>
        <el-form-item label="当前版本号" prop="curVer">
            <el-input v-model="form.curVer" placeholder="x.x.x格式"></el-input>
        </el-form-item>
        <el-form-item label="强制更新" prop="force">
            <el-radio-group v-model="form.force">
                <el-radio-button :label="0">否</el-radio-button>
                <el-radio-button :label="1">是</el-radio-button>
            </el-radio-group>
        </el-form-item>
        <br>
        <el-form-item label="下载包路径" prop="url" style="width: 400px">
            <el-input type="textarea" v-model="form.url" placeholder="下载包路径"></el-input>
            <span class="size-12">填写一个通用链接, 链接中的变量可以用占位符替换, 支持的占位符: <el-tag>渠道</el-tag></span>
            <span class="size-12">例: https://baidu.com/download-渠道.apk</span>
        </el-form-item>
        <el-form-item label="更新说明" prop="comment">
            <el-input type="textarea" v-model="form.comment" placeholder="更新说明" style="width: 400px"></el-input>
        </el-form-item>
        <br>
        <el-form-item>
            <el-button type="primary" :loading="loading" @click="submit">确定</el-button>
            <el-button @click="cancel">返回</el-button>
        </el-form-item>
        <el-form-item label="渠道" prop="sources">
            <checkbox-app-source v-model="form.sources"></checkbox-app-source>
        </el-form-item>
<!--        <el-form-item>-->
<!--            <el-button type="primary" :loading="loading" @click="submit">确定</el-button>-->
<!--            <el-button @click="cancel">返回</el-button>-->
<!--        </el-form-item>-->
    </el-form>
</template>

<script>
import CheckboxAppSource from "~/components/Checkbox/app-source.vue";

export default {
    props: {
        data: {
            type: Array,
            default: [],
        }
    },
    components: {
        CheckboxAppSource,
    },
    data() {
        return {
            loading: false,
            form: {
                sources: [],
            },
            formDefault: {
                os: 'android',
                minVer: '',
                curVer: '',
                url: '',
                comment: '',
                force: 0,
            },
            rules: {
                // appid: [
                //     { required: true, message: '请选择关联应用', trigger: 'blur' },
                // ],
                source: [
                    { required: true, message: '请输入关联渠道', trigger: 'blur' },
                ],
                os: [
                    { required: true, message: '请选择系统类型', trigger: 'blur' },
                ],
                minVer: [
                    { required: true, message: '请输入最小版本号', trigger: 'blur' },
                ],
                curVer: [
                    { required: true, message: '请输入当前版本号', trigger: 'blur' },
                ],
                url: [
                    { required: true, message: '请输入下载包路径', trigger: 'blur' },
                ],
            },
        }
    },
    computed: {

    },
    watch: {
        data (newVal) {
            this.syncForm();
        }
    },
    methods: {
        getFormAction() {
            return 'appVersion/BatchUpdate';
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) return false;
                this.loading = true;
                this.$store.dispatch(this.getFormAction(), this.form).then(res => {
                    this.$message.success(res.data.message);
                    this.$emit('submit');
                }).finally(() => {
                    this.loading = false;
                });
            });
        },
        cancel() {
            this.$emit('cancel');
        },
        syncForm() {
            this.form.sources = [];
            if (this.data.length) {
                this.form.sources = this.data.map(v => v.source);
            }
            this.form = Object.assign({}, this.form, this.formDefault);
        },
    },
    created () {
        this.syncForm();
    }
}
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
</style>

